<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    <script src="../../../bower_components/vue-router/dist/vue-router.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!--v-link标签-->
            <li><a v-link="{path:'/home'}">主页</a></li>
            <li><a v-link="{path:'/news'}">新闻</a></li>
        </ul>
        <!--显示的页面，每个模板里面需要有一个-->
        <router-view></router-view>
    </div>

    <script>
        //1.根组件
        var root = Vue.extend();
        //2.其它组件
        var home = Vue.extend({
            template: '<h1>这是主页的消息</h1>'
        });
        var news = Vue.extend({
            template: '<h1>这是新闻的消息</h1>'
        });
        //3.准备路由
        var router = new VueRouter();
        //4.关联相关组件
        router.map({
            'home': {
                component: home
            },
            'news': {
                component: news
            }
        });
        //5.启动路由
        router.start(root, '#app');
        //6.设置默认跳转页面
        router.redirect({
            '/':'home'
        });
    </script>
</body>

</html>